<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: skyblue;
        }

        .p {
            color: red;
            margin-left: 20px;
            display: inline-block;
        }

        .c {
            color: red;
            margin-left: 4px;
            display: inline-block;
        }

        .l {
            font-size: 18px;
        }

        .d {
            height: 35px;
            width: 300px;
            display: inline;
        }

        .i {
            height: 30px;
            width: 300px;
        }

        .n {
            height: 30px;
            width: 300px;
            margin-left: 10px;
        }

        .add {
            height: 30px;
            width: 300px;
            margin-left: 14px;
        }

        #msg {
            min-width: 120px;
            height: 35px;
            position: absolute;
            margin-left: 400px;
            margin-top: -36px;
            font-size: 15px;
            font-family: "仿宋";
            border-radius: 3px;
            /*盒子阴影：水平位移(正为右) 垂直位移(下为正) 模糊半径(pixel) color*/
            box-shadow: 3px 5px 7px navajowhite;
            background-color: rgba(255, 255, 255, 1);
            line-height: 35px;
            color: green;
        }
    </style>
</head>
<body>
<div style="height:100px;"></div>
<form action="UserRegister" method="post" id="form">
    <div style="width:500px;float:left;margin:0 250px;min-height:1000px;">
        <b>
            <div style="font-size:33px;">注册新用户</div>
        </b>
        <br/>
        <span class="p">*</span>
        <label for="username" class="l">用户名:</label>
        <div style="height:35px;width:300px;position:relative;display:inline;">
            <input id="username" name="username" placeholder="Please Entry UserName!" type="text"
                   style="height:30px;width:250px;padding-right:50px;">
            <span style="position:absolute;right:18px;top:2px;height:16px;width:16px;display:inline-block;"></span>
        </div>
        <div id="msg">该用户已被注册</div>
        <br/><br/>

        <span class="c">*</span>
        <label for="login_password" class="l">登录密码:</label>
        <div class="d">
            <input id="login_password" name="password" placeholder="Please Entry password!" type="password" class="i">
        </div>
        <br/><br/>

        <span class="p">&nbsp;&nbsp;</span>
        <label for="phonenumber" class="l">手机号:</label>
        <div class="d">
            <input id="phonenumber" type="text" name="mobile" class="i">
        </div>
        <br/><br/>

        <span class="p">*</span>
        <label for="age" class="n">年 龄:</label>
        <div class="d">
            <input id="age" type="text" name="age" placeholder="Please Entry Number!" class="n">
        </div>
        <br/><br/>

        <span class="p"></span>
        <label for="address" class="add">姓 名:</label>
        <div class="d">
            <input type="text" name="name" class="add">
        </div>
        <br/><br/>

        <span class="p"></span>
        <label for="address" class="add">地 址:</label>
        <div class="d">
            <input type="text" name="address" class="add">
        </div>
        <br/><br/>

        <span class="p">&nbsp;</span>
        <label for="address" class="add">Q Q:</label>
        <div class="d">
            <input type="text" name="qq" class="add">
        </div>
        <br/><br/>

        <span class="p"></span>
        <label for="address" class="add">微 信:</label>
        <div class="d">
            <input type="text" name="wechat" class="add">
        </div>
        <br/><br/>

        <span class="p">*</span>
        <label for="address" class="add">Email:</label>
        <div class="d">
            <input id="address" type="text" name="email" class="add">
        </div>
        <br/><br/>

        <span class="p">*</span>
        <label about="sex" class="n">性 别:</label>
        <div class="d">
            <input type="radio" name="sex" Value="男" id="sex1">
            <label for="sex1">男</label>
            <input type="radio" name="sex" Value="女" id="sex2">
            <label for="sex2">女</label>
        </div>
        <br/><br/>

        <span class="p">*</span>
        <label for="age" class="n">爱 好:</label>
        <div class="d">
            <input type="checkbox" name="aihao" value="唱">唱
            <input type="checkbox" name="aihao" value="跳">跳
            <input type="checkbox" name="aihao" value="rap">rap
            <input type="checkbox" name="aihao" value="打篮球">打篮球
        </div>
        <br/><br/>

        <span class="p">&nbsp;</span>
        <label for="address" class="add">籍 贯:</label>
        <div class="d">
            <select name="jiguan">
                <option value="广西">广西</option>
                <option value="北京">北京</option>
                <option value="福建">福建</option>
                <option value="江苏">江苏</option>
                <option value="南京">南京</option>
                <option value="河南">河南</option>
                <option value="广东">广东</option>
                <option value="null">无</option>
            </select>
        </div>
        <br/><br/>

        <input id="protocol" type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1"/>
        <span style="font-size:13px;">我已阅读并同意《用户注册协议》</span>
        <br/><br/>
        <input type="button" id="submit" onclick="regis()" value="同意以上协议并注册"
               style="margin: 2px;margin-left:100px;height:30px;width:300px;background-color:lightskyblue;display:inline-block;"/>
        <input type="reset" value="点击重置"
               style="margin: 2px;margin-left:100px;height:30px;width:300px;background-color:lightskyblue;display:inline-block;"/>
        <a href="home.jsp"><input type="button" value="已有账户?请返回登录"
                                  style="margin: 2px;margin-left:100px;height:30px;width:300px;background-color:lightskyblue;display:inline-block;"/></a>
    </div>
</form>
</body>
<script type="text/javascript">
    function pw(text) {
        console.log(text);
    }

    function id(node) {
        return document.getElementById(node);
    }

    var isagree = id('protocol');
    var flag = true;
    var submit = id('submit');
    submit.disabled = true;

    function regis() {
        if (flag == true) {
            document.getElementById('form').submit();
        } else {
            alert('该用户名不可用');
        }
    }

    window.onload = function () {
        var msg = id('msg');
        var uname = id('username');
        uname.oninput = function () {
            if (uname.value == '') {
                msg.style.color = 'red';
                msg.innerHTML = '用户名不可为空';
                flag = false;
            } else {
                getAjax();
            }
        }

        function getAjax() {
            var ajax;
            //1.获取一个XMLHttpRequest对象
            if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
            }
            //2.回调函数,它的作用就是用于处理服务器响应的数据
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4) {
                    if (ajax.status == 200) {
                        //5.在回调函数中获取服务器响应的数据  获取活动剩余时间秒(s)
                        var result = ajax.responseText;
                        var data = [];
                        data.push(eval("(" + result + ")"));
                        if (data[0].judge() === 1) {
                            msg.style.color = 'green';
                            msg.innerHTML = '用户名可用';
                            flag = true;
                        } else {
                            msg.style.color = 'red'
                            msg.innerHTML = '该用户名已被注册';
                            flag = false;
                        }
                    }
                }
            }
            //3.设置请求方式GET/POST及请求的URL
            ajax.open("post", "user/uniqueUsername?username=" + uname.value);
            //4.真正向服务器发送请求
            ajax.send(null);
        }

        var ji = setInterval(function () {
            if (isagree.checked == true) {
                submit.disabled = false;
            } else {
                submit.disabled = true;
            }
        }, 500);
    }
</script>
</html>